<template>
  <!-- 新增坐席按钮 -->
  <Row class="btn_group">
    <ButtonGroup>
      <Button @click="login"
              :disabled="loginFlag">登录</Button>
      <Button @click="check"
              :disabled="checkFlag">签出</Button>
      <Button @click="exhale"
              :disabled="exhaleFlag">呼出</Button>
      <Button @click="leisure"
              :disabled="leisureFlag">示闲</Button>
      <Button @click="busy"
              :disabled="busyFlag">示忙</Button>
      <Button @click="handUp"
              :disabled="handUpFlag">挂机</Button>
    </ButtonGroup>
    <table cellpadding="0"
           cellspacing="5"
           border="0"
           style="width: 500px">
      <tr>
        <!-- <td>零配置URL</td> -->
        <td><input id="zeroCfgURL"
                 type="hidden"
                 style="width: 120px"
                 value="http://10.116.40.131:8181/was/" /></td>
        <!-- <td>VCID</td> -->
        <td><input id="vcid"
                 type="hidden"
                 style="width: 120px"
                 value="95" /></td>
      </tr>
      <tr>
        <!-- <td>工号</td> -->
        <td><input id="operatorId"
                 type="hidden"
                 style="width: 120px"
                 value="59910" /></td>
        <!-- <td>密码</td> -->
        <td><input id="password"
                 type="hidden"
                 style="width: 120px"
                 value="123456" /></td>
      </tr>
      <tr>
        <!-- <td>呼出号码</td> -->
        <td><input id="callee"
                 type="hidden"
                 style="width: 120px"
                 value="13956878724" /></td>
        <!-- <td>状态码</td> -->
        <td><input id="state"
                 type="hidden"
                 style="width: 120px"
                 readonly="readonly" /></td>
      </tr>
      <tr>
        <td colspan="4">
          <input id="btnSignIn"
                 type="button"
                 value="登录"
                 onclick="clickBtnSignIn()" />
          <input id="btnSignOut"
                 type="button"
                 value="签出"
                 onclick="clickSignOut()"
                 disabled="disabled" />
          <input id="btnCallOut"
                 type="button"
                 value="呼出"
                 onclick="clickCallOut()"
                 disabled="disabled" />
          <input id="btnSetIdle"
                 type="button"
                 value="示闲"
                 onclick="clickSetIdle()"
                 disabled="disabled" />
          <input id="btnSetBusy"
                 type="button"
                 value="示忙"
                 onclick="clickSetBusy()"
                 disabled="disabled" />
          <input id="btnHangup"
                 type="button"
                 value="挂机"
                 onclick="clickHangup()"
                 disabled="disabled" />
        </td>
      </tr>
      <tr>
        <td colspan="4">
          <div id="messages"></div>
        </td>
      </tr>
    </table>
  </Row>
</template>

<script>

export default {
  data () {
    return {
      loginFlag: false, //登录按钮
      checkFlag: true, //签出按钮
      exhaleFlag: true, //呼出按钮
      leisureFlag: true, //示闲按钮
      busyFlag: true, //示忙按钮
      handUpFlag: true, //挂机按钮
    }
  },
  methods: {
    //登录
    login () {
      this.loginFlag = true
      this.checkFlag = false
      this.leisureFlag = false
    },
    //签出
    check () {
      this.loginFlag = false
      this.checkFlag = true
      this.leisureFlag = true
      this.exhaleFlag = true
      this.busyFlag = true
      this.handUpFlag = true
    },
    //呼出
    exhale () {
      this.exhaleFlag = true
      // 电话接通后挂机按钮方可点击
      this.handUpFlag = false
    },
    //示闲
    leisure () {
      this.leisureFlag = true
      this.exhaleFlag = false
      this.busyFlag = false
    },
    //示忙
    busy () {
      this.busyFlag = true
      this.leisureFlag = false
    },
    //挂机
    handUp () {
      this.handUpFlag = true
      // 电话挂机后呼出按钮方可点击
      this.exhaleFlag = false
    },
  }
}
</script>